<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { onMounted, ref } from 'vue'
const total = ref(999878)
const person = ref('216908人')
let ball = ref()
onMounted(() => {
  let myCharts = echarts.init(ball.value)
  const rate = 0.5
  myCharts.setOption({
    backgroundColor: '#081736',
    polar: {
      radius: ['75%', '80%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      clockwise: false,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        // 水波球
        // value: 50, //  内容 配合formatter
        type: 'liquidFill',
        name: '预约量',
        radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
        center: ['50%', '50%'],
        data: [rate, rate, rate], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'rgba(11, 35, 71, 1)', // 球体本景色
        },
        amplitude: '10%', //波浪的振幅
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: '#139fbb',
              },
              {
                offset: 0,
                color: '#1bc4b2',
              },
            ],
            globalCoord: false,
          },
        ],
        label: {
          formatter: '{a}',
          fontSize: 24,
          color: '#fff',
        },
        outline: {
          show: false,
        },
      },
      {
        // 外层虚线环
        type: 'pie',
        zlevel: 0,
        silent: true,
        radius: ['76%', '78%'],
        z: 1,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: Pie(),
      },
      {
        // 进度条环
        name: '',
        type: 'bar',
        roundCap: true,
        z: 2,
        showBackground: false,
        data: [rate * 100],
        coordinateSystem: 'polar',
        barWidth: 30, //大的占比环
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: '#1bc4b2',
            },
            {
              offset: 1,
              color: '#139fbb',
            },
          ]),
        },
      },
    ],
  })
})
function Pie() {
  // 外层虚线圈数据
  let dataArr = []
  for (var i = 0; i < 150; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: 50,
        itemStyle: {
          color: '#19A4BB',
          borderWidth: 0,
          borderColor: 'rgba(0,0,0,0)',
        },
      })
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: 100,
        itemStyle: {
          color: 'rgba(0,0,0,0)',
          borderWidth: 0,
          borderColor: 'rgba(0,0,0,0)',
        },
      })
    }
  }
  return dataArr
}
</script>

<template>
  <div class="tourist">
    <div>
      <p class="title">实时游客统计</p>
      <div class="img"></div>
      <div class="total">
        可预约总量
        <span>{{ total }}</span>
        人
      </div>
      <ul>
        <li v-for="(item, index) in person" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div class="ball" ref="ball"></div>
  </div>
</template>

<style scoped lang="scss">
.tourist {
  height: 340px;
  background: url('../images/dataScreen-main-lt.png') no-repeat;
  background-size: cover;
  color: white;
  position: relative;
  .title {
    font-size: 24px;
  }
  .img {
    width: 68px;
    height: 7px;
    background: url('../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    margin-top: 8px;
  }
  .total {
    position: absolute;
    right: 0;
    top: 35px;
    font-size: 18px;
    span {
      color: #f56d2f;
    }
  }
  ul {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    li {
      width: 60px;
      height: 60px;
      background: url('../images/total.png') no-repeat;
      background-size: cover;
      text-align: center;
      line-height: 60px;
      font-size: 28px;
      font-weight: 700;
      color: #8cf8fb;
    }
  }
  .ball {
    width: 100%;
    height: 62%;
  }
}
</style>
